<template>
  <div style="min-width: 809px">
    <!-- 页面底部有总金额，参考原型 -->
    <div v-if="$route.path == '/receptionstoreCommissionList'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店：">
            <el-select
              v-model="paging.store_id"
              placeholder="请选择"
              style="width: 250px"
              @change="changesShop"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="类型：">
            <el-select
              @change="changesType"
              style="width: 250px"
              v-model="paging.type"
              placeholder="请选择"
            >
              <el-option label="月汇总" value="1"> </el-option>
              <el-option label="日汇总" value="2"> </el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="前台：">
            <el-select
              v-model="paging.staff_id"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="月份" v-if="paging.type == 1">
            <el-date-picker
              style="width: 250px"
              v-model="paging.month"
              type="month"
              placeholder="请选择"
              @change="changeDate"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="日期" v-else>
            <el-date-picker
              style="width: 250px"
              v-model="paging.date"
              type="date"
              placeholder="请选择"
              @change="changeDate"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box" v-if="paging.type == 1">
        <div class="operation-box clear-float">
          <el-button
            icon="el-icon-upload2"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          >
          <!-- <el-button @click="configuration()" type="primary"
            >前台提成配置</el-button
          > -->
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
          max-height="650"
        >
          <el-table-column label="序号" width="100" type="index">
          </el-table-column>
          <el-table-column prop="store_name" label="门店" min-width="150">
          </el-table-column>
          <el-table-column
            label="月份"
            min-width="150"
            prop="month"
          ></el-table-column>
          <el-table-column prop="staff_name" label="前台" min-width="150">
          </el-table-column>
          <el-table-column 
            label="前台业绩"
            min-width="150"
          >
          <template slot-scope="scope">
               <span >{{scope.row.price || 0}}</span>
          </template> 
          </el-table-column>
          <el-table-column
            prop="staff_money"
            label="提成金额"
            min-width="150"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="vs-table-box" v-else>
        <div class="operation-box clear-float">
          <el-button icon="el-icon-upload2" @click="exportFile()"
            >导出</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column prop="store_name" label="门店">
            <template slot-scope="scope">
              {{ scope.row.store_name }}
            </template>
          </el-table-column>
          <el-table-column label="日期" prop="date"></el-table-column>
          <el-table-column label="前台在岗人数" prop="count"></el-table-column>
          <el-table-column prop="recharge_money" label="充值金额（元）">
          </el-table-column>
          <el-table-column prop="gt_money" label="在岗人数大于3人">
          </el-table-column>
          <el-table-column prop="lt_money" label="在岗人数小于3人">
          </el-table-column>
          <el-table-column
            :label="ele.name"
            v-for="(ele, index) in staffList"
            :key="ele.id"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.staff[index].is_duty == 1">
                {{ scope.row.staff[index].day_money }}
              </div>
              <div v-else>休息</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      dialogVisible: false,
      paging: {
        type: "1",
        store_id: "",
        date: "",
        staff_id: "",
        month: "",
      },
      form: {
        date: "",
      },
      staffList: [],
      tableData: [],
      storeList: [],
      shopList: [],
      isExport: false,
    };
  },
  created() {
    if (this.$route.path == "/receptionstoreCommissionList") {
      this.handleCurrentChange(1);
      this.getAllStoreList();
      this.getShopOwner();
      var date = new Date();
      if (this.paging.type == 2) {
        this.paging.date = this.utils.time(date);
      } else {
        this.paging.month = this.utils.timeMonth(date);
      }
      console.log(this.paging);
    }
  },
  methods: {
    configuration() {
      this.utils.goUrl("/receptionist");
    },
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportReceptionShape(this.paging);
      this.utils.downloadXlsx(res, "前台提成");
      this.isExport = false;
    },
    changesType(e) {
      if (e == 2 && !this.paging.store_id) {
        this.$message.error("请先选择门店");
        this.paging.type = "1";
        return false;
      } else {
        this.repairGetList();
      }
    },
    changeDate(e) {
      if (this.paging.type == 1) {
        this.paging.month = this.utils.timeMonth(e);
      } else {
        this.paging.date = this.utils.time(e);
      }
    },
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
      }
    },
    // 获取公司前台列表
    async getShopOwner() {
      let { code, data } = await this.$Http.getReception({
        store_id: this.paging.store_id,
      });
      if (code) {
        this.shopList = data;
      }
    },
    // 选择门店联动对应前台
    changesShop(e) {
      this.paging.staff_id = String(e)
      console.log(this.paging.staff_id,"this.paging.staff_id")
      this.shopList = [];
      this.paging.staff_id = "";
      this.getShopOwner();
    },
    async setRow(type, row) {
      this.utils.goUrl("/goodsOrderInfo?type=" + type);
      return;
      if (type == 1) {
        this.dialogVisible = true;
        setTimeout(() => {
          this.ruleForm = Object.assign({}, row);
        }, 200);
      } else if (type == 2) {
        this.isInfo = true;
        this.loading2 = true;
        let { code, data } = await this.$Http.catdistribution({
          id: row.id,
        });
        this.loading2 = false;
        if (code) {
          this.recordList = data;
        } else this.recordList = [];
      }
    },
    handleClose(dom) {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
      dom && dom();
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.receptionShape(this.paging);
      this.loading = false;
      if (code) {
        let list = [];
        if (this.paging.type == "2") {
          data.forEach((v) => {
            v.staff.forEach((a) => {
              if (list.findIndex((v2) => v2.id == a.id) == -1) list.push(a);
            });
          });
          this.staffList = list;
        } else {
          data.forEach((ele) => {
            ele.month = this.paging.month;
          });
        }
        this.tableData = data;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      var date = new Date();
      if (this.paging.type == 2) {
        this.paging.date = this.utils.time(date);
      } else {
        this.paging.month = this.utils.timeMonth(date);
      }
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.operation-box {
  display: flex;
  justify-content: flex-end;
}
</style>